<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function select(){
            //得到图片对象
            var faceImg=document.getElementById("YH");
            //得到下拉款对象
            var selectValue=document.getElementById("imgSelect");
            //selectValue对象点value表示得到下拉框选中option选项的value值
            // alert(selectValue.value);
            // switch (selectValue.value){
            //     case "伊涵1":
            //         faceImg.src="img/yihan1.jpg";
            //         break;
            //     case "伊涵2":
            //         faceImg.src="img/yihan2.jpg";
            //         break;
            //     case "伊涵3":
            //         faceImg.src="img/yihan3.jpg";
            //         break;
            //     case "伊涵4":
            //         faceImg.src="img/yihan4.jpg";
            //         break;
            //     default:
            //         faceImg.src="img/yihan1.jpg";
            //         break;
            // }
            if (selectValue.value==="伊涵2"){
                faceImg.src="img/yihan3.jpg";
            }else if (selectValue.value==="伊涵3"){
                faceImg.src="img/yihan1.jpg";
            }else if (selectValue.value==="伊涵1"){
                faceImg.src="img/yihan2.jpg";
            }else if (selectValue.value==="伊涵4"){
                faceImg.src="img/yihan4.jpg";
            }
        }
        function selectImage(selectObj){
            document.getElementById("YH").src=selectObj.value;
        }
    </script>
</head>
<body>
    <img src="img/yihan1.JPG" alt="伊涵妹纸" id="YH" style="width: 280px;height: 350px"> <br>
<!--    onchange 当下拉框选项变化时触发-->
    <select name="wife" id="imgSelect" onchange="selectImage(this)">
        <option value="img/yihan1.jpg">伊涵1</option>
        <option value="img/yihan2.jpg">伊涵2</option>
        <option value="img/yihan3.jpg">伊涵3</option>
        <option value="img/yihan4.jpg">伊涵4</option>
    </select>
</body>
</html>